<template>
    <div class="top-banner">
        <div class="w container">
            <div class="left">
                <a rel="nofollow" target="_blank" href="#">首页</a>
            </div>
            <ul class="right-nav">
                <li>
                    <div>
                        <a rel="nofollow" target="_blank" href="#" class="select-menu">关于我们</a>
                    </div>
                    <div class="droplist">
                        <div class="item">测试1</div>
                        <div class="item">测试2</div>
                        <div class="item">测试3</div>
                    </div>
                </li>
                <li class="line">|</li>
                <li>
                    <div>
                        <a rel="nofollow" target="_blank" href="#" class="select-menu">我的订单</a>
                    </div>
                </li>
                <li class="line">|</li>
                <li>
                    <div>
                        <a rel="nofollow" target="_blank" href="#" class="select-menu">商家服务</a>
                    </div>
                </li>
                <li class="line">|</li>
                <li>
                    <div>
                        <a rel="nofollow" target="_blank" href="#/chat">在线客服</a>
                    </div>
                </li>
                <li class="line">|</li>
                <li>
                    <div>
                        <a rel="nofollow" target="_blank" href="#">联系我们</a>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script setup></script>

<style lang="scss" scoped>
$li-width: 60px;
.top-banner {
    background-color: #e3e4e5;
}
.container {
    display: flex;
    line-height: 30px;
    font-size: 12px;
    justify-content: space-around;
}
.right-nav {
    display: flex;
    margin: 0;
    li {
        text-align: center;
        padding-left: 8px;
        padding-right: 12px;
        width: $li-width;
        position: relative;
        .droplist {
            display: block;
            transform: scale(0);
            transition: 0.3s;
            transform-origin: top;
        }
        &:nth-child(odd):hover {
            cursor: pointer;
            background-color: #fff;
            .droplist {
                transform: scale(1);
                z-index: 9;
                background-color: #fff;
                div {
                    &:hover {
                        // color: $blue4;
                        background-color: #d9ecff;
                    }
                }
            }
        }
    }
    // li {
    //     text-align: center;
    //     padding-left: 8px;
    //     padding-right: 12px;
    //     width: $li-width;
    //     position: relative;
    //     div > a {
    //         &:hover {
    //             color: $blue4;
    //         }
    //     }
    //     .droplist {
    //         display: block;
    //         transform: scale(0);
    //         transition: 0.3s;
    //         transform-origin: top;
    //     }
    //     &:hover {
    //         cursor: pointer;
    //         background-color: #fff;
    //         .droplist {
    //             transform: scale(1);
    //             z-index: 9;

    //             background-color: #fff;
    //             div {
    //                 &:hover {
    //                     color: $blue4;
    //                 }
    //             }
    //         }
    //     }
    // }
}
.select-menu {
    position: relative;
    &::after {
        content: '^';
        position: absolute;
        top: -58%;
        right: -22%;
        transform: rotate(180deg) scale(0.9);
    }
}
.right-nav .line {
    padding: 0;
    width: 5px;
    transform: scale(0.9);
}
.droplist {
    display: none;
    position: absolute;
    width: $li-width;
    text-align: center;
}
</style>
